<template>
  <div style="position: relative; height: 50%; margin-bottom: 15px">
    <span
      class="recognition"
      style="position: absolute   ; top: 18px; left: 15px; z-index: 9999"
    ></span>
    <div id="echartHindingsNumber" class="echarts-style-HindingsNumber"></div>
  </div>
</template>

<script>
export default {
      props: ["HindingsNumber"],
  data() {
    return {
      myChart1: null,
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        title: [
          {
            text: `绑定数量`,
            left: 30,
            textStyle: {
              fontWeight: 400,
              lineHeight: 34,
              color: "#FFF",
              fontSize: 16,
            },
          },
        ],
        tooltip: {
          trigger: "axis",
            axisPointer: {
            type: "cross",
          },
        },
        legend: {
          show: true,
          left: "right", //组件离容器左侧的距离,'left', 'center', 'right','20%'
          top: "12", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
          textStyle: {
            fontSize: 12,
            color: "#FFFFFF",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          top: "4%",
          containLabel: true,
        },
        color: ["#FA7F34"],
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "一月", max: 50 },
            { name: "二月", max:50 },
            { name: "三月", max: 50 },
            { name: "四月", max: 50 },
            { name: "五月", max: 50 },
            { name: "六月", max: 50 },
            { name: "七月", max: 50 },
            { name: "八月", max: 50},
            { name: "九月", max: 50 },
            { name: "十月", max: 50 },
            { name: "十一月", max: 50 },
            { name: "十二月", max: 50 },
          ],
        },
        series: [
          {
            // name: "",
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            data: [
              {
                value:[],
                name: "绑定数量",
              },
            ],
          },
        ],
      },
    };
  },


watch: {
      HindingsNumber: {
        handler(newVal, oldName) {
            let dataList = []
            let xList = []
            let data = [...newVal]
            xList = data.map(item => {
              dataList.push({
                value: item.ct,
                name: item.model
              })
              return item.model.split('-')[1]+'月'
            })
          let valueSetValue=[0,0,0,0,0,0,0,0,0,0,0,0]
          let dataArray=["01","02","03","04","05","06","07","08","09","10","11","12"]
            var dataLet=new Date()
            var year=dataLet.getFullYear()
          for(var i=0;i<dataList.length;i++){
              for (var ii=0;ii<dataArray.length;ii++){
                if(dataList[i]["name"]===year+"-"+dataArray[ii]){
                  valueSetValue[ii]=dataList[i]["value"]
               }
              } 
          }
          console.log("ft3",valueSetValue)
            this.option.series[0].data[0]["value"] =valueSetValue
            this.myChart1 && this.myChart1.setOption(this.option);
        },
        //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
        immediate: true,
        deep: true // 开启深度监听，默认是false
      },
    },


  
  mounted() {
    let that = this;
    this.initDeviceEcharts();
    window.addEventListener("resize", () => {
      // console.log("myChart1")
      that.myChart1.resize();
    });
  },
  methods: {
    initDeviceEcharts() {
      var chartDom = document.getElementById("echartHindingsNumber");
      this.myChart1 = this.$echarts.init(chartDom);

      this.myChart1.setOption(this.option);
    },
  },
};
</script>

<style>
.echarts-style-HindingsNumber {
  width: 100%;
  height: 100%;
  background-color: #072e5f;
  border: 1px solid #072e5f;
  padding: 6px;
  border-radius: 8px;
}
</style>